<template>
    <div class="layout-page">
        <img src="@/assets/images/bg1.jpg" alt="" class="layout-bg">
        <div class="layout-content" :style="'transform: scale('+ getZoom +')'">
            <PageHeader></PageHeader>
            <router-view></router-view>
        </div>
    </div>
</template>

<script>
import PageHeader from "@/components/PageHeader"
import { mapGetters } from 'vuex'
export default {
    name: 'layout',
    components : {PageHeader},
    data: function () {
        return {}
    },
    computed: {
        ...mapGetters([
            'getZoom'
        ])
    },
}
</script>

<style scoped>
.layout-bg{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}
.layout-content{
    position: fixed;
    top: 50%;
    left: 50%;
    margin-left: -960px;
    margin-top: -540px;
    width: 1920px;
    height: 1080px;
}
</style>